<script setup lang="ts">
import useUserStore from "@/pinia/userStore.ts";
import {reactive, ref} from "vue";
import {ElMessage} from "element-plus";
import {validPhone} from "@/utils/validate.ts";
import {loginInterface} from "@/components/Loign/interface/interface.ts";

const userStore = useUserStore()

const elFormRef = ref<any>(null)
const time = ref<number>(60)
const timeId = ref<number>(0)
const disabled = ref<boolean>(false)
const validaPhone = (rule: any, value: string, callback: any) => {
  if (!validPhone(value)) return callback(new Error('输入的手机号不合格'))
  callback()
}
const formData = reactive<loginInterface>({
  phone: '17720125002',
  code: ''
})
const formRules = reactive({
  phone: [
    {required: true, message: '请输入手机号', trigger: 'change'},
    {validator: validaPhone, trigger: 'blur'}
  ],
  code: [
    {required: true, message: '请输入验证码', trigger: 'change'},
    {max: 8, min: 4, message: '验证码为4-8位', trigger: 'change'},
  ]
})

const subTime = () => {
  clearInterval(timeId.value)
  disabled.value = true
  timeId.value = setInterval(() => {
    time.value--
    if (time.value <= 0) {
      time.value = 60
      disabled.value = false
      clearInterval(timeId.value)
    }
  }, 1000)
}
const handleGetCode = () => {
  elFormRef.value.validateField('phone', async (valid: boolean) => {
    if (!valid) return
    try {
      subTime()
      const code: string = await userStore.getCode(formData.phone)
      formData.code = code
    } catch (error) {
      ElMessage.warning(error.message)
    }
  })
}
const handleLogin = async () => {
  const valid: boolean = await elFormRef.value.validate(() => {
  }).catch(error => error)
  if (!valid) return
  try {
    await userStore.login(formData)
    userStore.changeDialog(false)
    ElMessage.success('登录成功')
  } catch (error) {
    ElMessage.error(error.message)
  }
}

const clearFormData = (): void => {
  elFormRef.value.resetFields()
}

defineExpose({
  clearFormData,
})
</script>

<template>
  <div class="form-container">
    <el-form :model="formData" :rules="formRules" ref="elFormRef">
      <el-form-item prop="phone">
        <el-input placeholder="请输入手机号" prefix-icon="User" v-model="formData.phone"></el-input>
      </el-form-item>
      <el-form-item prop="code">
        <el-input placeholder="请输入手机验证码" prefix-icon="Lock" v-model="formData.code"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="info" @click="handleGetCode" :disabled="disabled" size="small">
          获取验证码<span v-if="disabled">({{ time }}S)</span>
        </el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" class="loginBtn" @click="handleLogin">用户登录</el-button>
      </el-form-item>
    </el-form>
    <div class="wx">
      <span class="message" @click="userStore.changeFlag(false)">微信扫码登录</span>
      <i class="iconfont icon-weixin"></i>
    </div>
  </div>
</template>

<style scoped lang="scss">
.form-container {
  padding: 20px;

  .el-form {
    .loginBtn {
      width: 100%;
      height: 40px;
    }
  }

  .wx {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;

    .message {
      cursor: pointer;
    }

    i {
      font-size: 30px;
      color: #41a83a;
      margin-top: 15px;
    }
  }
}
</style>
